<template>
    <div class="main">
        <div v-for="(item, idx) in stepTitle" class="item">
            <span class="idx" ref="idxRef">{{ idx + 1 }}</span>
            <span class="title" ref="titleRef">{{ item }}</span>
            <span v-show="idx !== stepTitle.length - 1" class="split">———</span>
        </div>
    </div>
</template>

<script setup lang="ts">
const props = defineProps<{
    active: number,
    stepTitle: string[]
}>()
const idxRef = ref()
const titleRef = ref()
let { active, stepTitle } = toRefs(props)
let visitedColor = '#00a0d8'
let activeColor = '#f27899'
let inactiveColor = '#99a2aa'
onUpdated(() => {
    let activeIdx = active.value
    let len = idxRef.value.length
    // 移除所有样式
    for (let i = 0; i < len; i++) {
        setStyle(i, inactiveColor)
    }
    for (let i = 0; i < len; i++) {
        if (i < activeIdx) {
            setStyle(i, visitedColor)
        } else if (i == activeIdx) {
            setStyle(i, activeColor)
        }
    }

})
const setStyle = (i: number, style: string) => {
    let idxs = idxRef.value;
    let titles = titleRef.value;
    idxs[i].style['border-color'] = style
    idxs[i].style['color'] = style
    titles[i].style['color'] = style
}
</script>


<style scoped lang="less">
.main {
    display: flex;
    width: 100% !important;
    justify-content: center;
    align-items: center;
    font-family: 'MicrosoftYaHei';
    font-weight: bold;
    user-select: none;

    .item {
        display: flex;

        .idx {
            width: 20px;
            height: 20px;
            text-align: center;
            margin-right: 5px;
            color: #99a2aa;
            vertical-align: middle;
            border: 2px solid #99a2aa;
            border-color: #99a2aa;
            border-radius: 50%;
            font-size: 12px;
        }

        .title {
            font-size: 16px;
            color: #99a2aa;
        }

        .split {
            font-size: 18px;
            margin: 0 8px;
            color: #e5e9ef;
        }
    }
}
</style>
